<template>
    <div class="detail" v-if="detail != null">
        <div class="bg">
            <div class="logo">
                <img src="../../assets/logo.png" alt="" @click.stop="toHome">
                <div>
                    通知公告
                </div>
            </div>
        </div>
        <div class="content">
            <h3>{{ detail.title }}</h3>
            <div class="subtext">
                <p>发布时间：{{ detail.createdAt }}</p>
                <p>浏览次数：{{ detail.scanNum }} 次</p>
            </div>
            <div class="editor-content-view" v-html="detail.content"></div>
            <div class="attach-list">
                <div class="item" v-for="(file, index) in attachList" :key="index">
                    <i class="el-icon-document"></i>
                    <div class="right">
                        <p>{{ file.name }}</p>
                        <!-- <a :href="file.url" :download="file.name">下载文件</a> -->
                        <el-link type="primary" @click="onAttachDownload(file.url)">下载</el-link>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { conditionQueryNotice } from "@/api/notice";
import { fileDownload } from "@/api/upload";

export default {
    name: 'NoticDetail',
    data() {
        return {
            detail: null,
            //服务器路径
            baseUrl: this.$serverPath,
            //附件列表
            attachList: []
        }
    },
    mounted() {
        const id = this.$route.query.id;
        this.getNoticDetail(id);

    },
    methods: {
        //获取通知详情
        getNoticDetail(id) {
            conditionQueryNotice({ id: id }).then(res => {
                this.detail = res.data[0];
                if (this.detail.attachList != "" || this.detail.attachList.length != 0) {
                    let correctedJsonString = this.detail.attachList.replace(/'/g, '"');
                    this.attachList = JSON.parse(correctedJsonString);
                }
            })
        },
        toHome() {
            this.$router.push("/teacher")
        },
        //下载附件
        onAttachDownload(downloadUrl) {
            window.location.href = downloadUrl;
        }
    }
}
</script>

<style lang="scss" scoped>
.detail {
    padding-bottom: 50px;

    .bg {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: -1;
        background: url("../../assets/notic-bg.jpg") no-repeat;

        .logo {
            display: flex;
            align-items: center;

            &>div {
                color: white;
                margin-left: 10px;
                border-left: 1px solid white;
                padding: 14px 0;
                padding-left: 15px;
            }
        }
    }

    .content {
        margin-top: 110px;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        background-color: white;
        min-height: 300px;
        margin-bottom: 50px;

        h3 {
            text-align: center;
            margin-bottom: 10px;
        }

        .subtext {
            padding: 10px 10px;
            font-size: 13px;
            text-align: center;
            color: #777;
            border-bottom: 1px dashed #ddd;

            p:first-child {
                margin-bottom: 10px;
            }
        }

        .editor-content-view {
            margin-top: 20px;
            padding: 0 10px;
            overflow-x: auto;

            :deep p,
            :deep li {
                /* 保留空格 */
                white-space: pre-wrap;
                line-height: 40px;

            }

            :deep p {
                line-height: 40px;
            }

            :deep blockquote {
                border-left: 8px solid #d0e5f2;
                padding: 10px 10px;
                margin: 10px 0;
                background-color: #f1f1f1;
            }

            :deep code {
                font-family: monospace;
                background-color: #eee;
                padding: 3px;
                border-radius: 3px;
            }

            :deep pre>code {
                display: block;
                padding: 10px;
            }

            :deep table {
                border-collapse: collapse;
            }

            :deep td,
            :deep th {
                border: 1px solid #ccc;
                min-width: 50px;
                height: 20px;
                padding: 3px 5px;
            }

            :deep th {
                background-color: #f1f1f1;
            }

            :deep ul,
            :deep ol {
                padding-left: 20px;
            }

            :deep input[type="checkbox"] {
                margin-right: 5px;
            }
        }

        .attach-list {
            display: flex;
            margin-top: 25px;

            .item {
                width: 50%;
                display: flex;
                align-items: center;

                i {
                    font-size: 30px;
                    color: #BBBBBB;
                    margin-right: 8px;
                }

                .right {
                    margin-right: 20px;
                    font-size: 14px;
                    color: #444;
                    flex: 1;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;

                    p {
                        width: 100%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    :deep a {
                        color: #00BCD4;
                        font-size: 12px;
                        text-decoration: none;
                    }
                }
            }
        }
    }
}
</style>